<template>
	<view>
		<u-popup :show="show1" mode="bottom" @close="close1" @open="open1" closeable="true" round="5">
			<view style="width: 90%;height: 60vh;margin:0 auto;margin-top:10px; position: relative;">
				<view
					style="width: 50%;margin:0 auto;height: 50rpx;display: flex;align-items: center;justify-content: center;">
					<text>添加训练次数</text>
				</view>
				<view style="height: 50rpx;display: flex;align-items: center;margin-top: 20px;">
					<text>动作次数:</text>
				</view>
				<view style="height: 100rpx;display: flex;align-items: center;">
					<view style="width: 40%;">
						<u--input v-model="insertForm.actionCount" placeholder="请输入训练次数" type="number"></u--input>
					</view>
					<view style="margin-left: 10px;">次</view>
				</view>
				<view style="height: 50rpx;display: flex;align-items: center;">
					<text>重量:</text>
				</view>
				<view style="height: 100rpx;display: flex;align-items: center;">
					<view style="width: 40%;">
						<u--input v-model="insertForm.equipmentWeight" placeholder="请输入重量" type="number"></u--input>
					</view>
					<view style="margin-left: 10px;">KG</view>
				</view>
				<view
					style="position: absolute;bottom: 0;width: 100%;box-sizing: border-box;padding: 15px;height: 50px;border-radius: 5px 5px 0 0;">
					<view style="display: flex;align-items: center;float: left;width: 50%;">
						<view
							style="width: 90%;display: flex;align-items: center;justify-content: center;height: 30px;border-radius: 4px;color: #A3A3A3;background: #F5F5F5;border:1px solid #D4D4D4;"
							@click="resetting()">
							重置
						</view>
					</view>
					<view style="display: flex;align-items: center;justify-content: flex-end;float: left;width: 50%;">
						<view
							style="width: 90%;display: flex;align-items: center;justify-content: center;height: 30px;border-radius: 4px;background-color: rgb(60, 156, 255);color: #fff;"
							@click="insertActionCount()">
							保存
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show2" mode="bottom" @close="close2" @open="open2" closeable="true" round="5">
			<view style="width: 90%;height: 60vh;margin:0 auto;margin-top:10px; position: relative;">
				<view
					style="width: 50%;margin:0 auto;height: 50rpx;display: flex;align-items: center;justify-content: center;">
					<text>修改训练次数</text>
				</view>
				<view style="height: 50rpx;display: flex;align-items: center;margin-top: 20px;">
					<text>动作次数:</text>
				</view>
				<view style="height: 100rpx;display: flex;align-items: center;">
					<view style="width: 40%;">
						<u--input v-model="updateForm.actionCount" placeholder="请输入训练次数" type="number"></u--input>
					</view>
					<view style="margin-left: 10px;">次</view>
				</view>
				<view style="height: 50rpx;display: flex;align-items: center;">
					<text>重量:</text>
				</view>
				<view style="height: 100rpx;display: flex;align-items: center;">
					<view style="width: 40%;">
						<u--input v-model="updateForm.equipmentWeight" placeholder="请输入重量" type="number"></u--input>
					</view>
					<view style="margin-left: 10px;">KG</view>
				</view>
				<view
					style="position: absolute;bottom: 0;width: 100%;box-sizing: border-box;padding: 15px;height: 50px;border-radius: 5px 5px 0 0;">
					<view style="display: flex;align-items: center;float: left;width: 50%;">
						<view
							style="width: 90%;display: flex;align-items: center;justify-content: center;height: 30px;border-radius: 4px;color: #A3A3A3;background: #F5F5F5;border:1px solid #D4D4D4;"
							@click="resettingUpdate()">
							重置
						</view>
					</view>
					<view style="display: flex;align-items: center;justify-content: flex-end;float: left;width: 50%;">
						<view
							style="width: 90%;display: flex;align-items: center;justify-content: center;height: 30px;border-radius: 4px;background-color: rgb(60, 156, 255);color: #fff;"
							@click="updateActionCount()">
							保存
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<view
			style="width: 90%;margin: 0 auto;margin-top: 10rpx;box-shadow: 0 2px 10px #dfdfdf; border-radius: 10px;box-sizing: border-box;padding: 10px;">
			<view style="height: 50rpx;width: 100%;">
				<view style="float: left;width: 50%;">
					<p>{{item.fitnessActionName}}</p>
				</view>
				<view style="float: left;width: 100%;display: flex;justify-content: flex-end;align-items: center;">
					<view
						style="width: 20%;height: 50rpx;background-color: rgb(60, 156, 255);display: flex;justify-content: center;align-items: center;border-radius: 25rpx;">
						<u-icon name="plus" label="添加" color="#fff" labelColor="#fff" @click="openInsert()"></u-icon>
					</view>
				</view>
			</view>
			<view style="width: 90%;padding: 40rpx;">
				<view
					style="width: 100%;background-color: #F7F7F7;margin: 0 auto;height: 180rpx;padding: 5px;box-sizing: border-box;margin-top: 10rpx;"
					v-for="(item, index) in actionData" :key="index">
					<view style="font-size: 26rpx;width: 90%;padding: 20rpx">
						<view style="height: 35rpx;width: 100%;float: left;">
							<view style="display: flex;align-items: center;width: 50%;">第{{ index+1 }}组
							</view>
							<view style="margin-left: 30rpx;">
								<view style="display: flex;align-items: center;">动作次数：<input @blur="submit(item)"
										type="text" v-model="item.actionCount"
										style="width:40px; background-color: rgb(235, 234, 234);border-radius :20rpx;text-align: center;">次
								</view>
								<view style="display: flex;align-items: center;margin-top: 20rpx;">器材重量：<input
										@blur="submit(item)" type="text" v-model="item.equipmentWeight"
										style="width: 40px; background-color: rgb(235, 234, 234);border-radius :20rpx;text-align: center;">kg
								</view>
							</view>
						</view>
						<view style="height: 35rpx;float: right;">
							<view style="float: right;color:red;margin-right: 40rpx;margin-top: 30rpx;"
								@click.stop="removeActionCount(item)">删除</view>
						</view>
					</view>
				</view>
			</view>
			<view style="float: left;width: 43%;height: 250rpx;margin-top: 100rpx;">
				案例记录:
				<u-upload width="250rpx" height="250rpx" :fileList="fileList1" @afterRead="afterRead"
					:capture="['camera','album']" @delete="deletePic" name="1" multiple :maxCount="1">
				</u-upload>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {},
				actionData: [],
				show1: false,
				show2: false,
				insertForm: {},
				updateForm: {},
				updateFormJSON: '',
				fileList1: [],
				ImageFile: '',
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			this.item = JSON.parse(option.item) //打印出上个页面传递的参数。
			if (this.item.originalItem.actionImage !== null && this.item.originalItem.actionImage !== undefined && this
				.item.originalItem.actionImage !== '') {
				let imageUrl = 'http://101.43.223.224:8765/image/getImageById?id=' + this.item.originalItem.actionImage;
				this.fileList1.push({
					'url': imageUrl
				});
			}

			this.selectAction()
		},
		methods: {
			open1() {
				// console.log('open');
			},
			close1() {
				this.show1 = false
				// console.log('close');
			},
			open2() {
				// console.log('open');
			},
			close2() {
				this.show2 = false
				// console.log('close');
			},
			openInsert() {
				this.insertForm = {}
				this.show1 = true
			},
			openUpdate(item) {
				this.updateFormJSON = JSON.stringify(item)
				this.updateForm = JSON.parse(this.updateFormJSON)
				this.show2 = true
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				var ths = this;
				uni.request({
					url: this.URL + 'vipPlan/DeleteImageToDatabase',
					method: 'POST',
					data: {
						coachId: uni.getStorageSync('teacherinfo').id,
						userId: ths.item.thisItem.memberId,
						actionId: ths.item.originalItem.id,
					},
					success: function(res) {
						if (res.data.code == 200) {

						} else {
							uni.showToast({
								title: '操作失败',
								icon: 'error',
								duration: 2000
							});
						}

					},
					fail: function(error) {
						// 处理请求失败
						console.error('上传课程失败，请检查网络');
					}
				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					this.ImageFile = lists[i]
					console.log(this.ImageFile);
					let image = this.ImageFile.url
					this.saveImageToDatabase(image)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			saveImageToDatabase(imageInfo) {
				var ths = this;
				const formData = {
					...this.articleForm
				};
				uni.uploadFile({
					url: this.URL + 'UserRecord/uploadImg',
					filePath: imageInfo,
					name: 'file',
					formData: formData,
					header: {
						'content-type': 'multipart/form-data',
					},
					success: function(res) {
						// ths.img = res.data.data.data
						uni.request({
							url: 'http://127.0.0.1:17000/vipPlan/saveImageToDatabase',
							method: 'POST',
							data: {
								coachId: uni.getStorageSync('teacherinfo').id,
								userId: ths.item.thisItem.memberId,
								actionId: ths.item.originalItem.id,
								actionImage: res.data,
							},
							success: function(res) {
								if (res.data.code == 200) {

								} else {
									uni.showToast({
										title: '操作失败',
										icon: 'error',
										duration: 2000
									});
								}

							},
							fail: function(error) {
								// 处理请求失败
								console.error('上传课程失败，请检查网络');
							}
						})
					},
					fail: function(error) {
						// 处理请求失败
						console.error('开启训练失败，请检查网络');
					}
				})
				// 调用后端接口将图片信息保存到数据库
				// 例如：axios.post('/api/saveImage', imageInfo)
			},
			uploadFilePromise(url) {
				return
			},
			updateActionCount() {
				var ths = this
				uni.request({
					url: this.URL + 'vipPlan/updateActionCount',
					method: 'POST',
					data: {
						id: ths.updateForm.id,
						actionCount: ths.updateForm.actionCount,
						equipmentWeight: ths.updateForm.equipmentWeight,
						planActionId: ths.item.originalItem.id,
					},
					success: function(res) {
						if (res.data.code == 200) {
							ths.updateForm = {}
							ths.selectAction()
							ths.show2 = false
						} else {}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			resettingUpdate() {
				this.updateForm = JSON.parse(this.updateFormJSON)
			},
			resetting() {
				this.insertForm = {}
			},
			insertActionCount() {
				var ths = this
				uni.request({
					url: this.URL + 'vipPlan/insertActionCount',
					method: 'POST',
					data: {
						planActionId: ths.item.originalItem.id,
						actionCount: ths.insertForm.actionCount,
						equipmentWeight: ths.insertForm.equipmentWeight
					},
					success: function(res) {
						if (res.data.code == 200) {
							ths.insertForm = {}
							ths.selectAction()
							ths.show1 = false
						} else {}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			removeActionCount(item) {
				var ths = this
				uni.request({
					url: this.URL + 'vipPlan/removeActionCount',
					method: 'GET',
					data: {
						actionId: item.id,
					},
					// userInfo:res.
					success: function(res) {
						if (res.data.code == 200) {
							ths.selectAction()
						} else {}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			submit(item) {
				var ths = this
				uni.request({
					url: this.URL + 'vipPlan/updateActionCount',
					method: 'POST',
					data: item,
					success: function(res) {
						if (res.data.code == 200) {

							ths.selectAction()

						} else {}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			// 查询动作组数
			selectAction() {
				var ths = this
				uni.request({
					url: this.URL + 'vipPlan/selectActionByActionId',
					method: 'GET',
					data: {
						actionId: ths.item.originalItem.id,
					},
					// userInfo:res.
					success: function(res) {
						if (res.data.code == 200) {
							ths.actionData = res.data.data;
						} else {
							ths.actionData = []
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			}
		}
	}
</script>

<style>

</style>